<!--产品推荐-->
<template>
  <div class="specialOffer2">
    <div>
      <h3>
        <p>
           <img :src="icon" style="width:29px;padding-top:5px"  />
      
          <i>{{title}}</i>
        </p>
      </h3>

      <div class="allbox">
        <ul ref="vari" @mouseleave="move()" @mouseenter="stopmove()">

          <router-link
            class="leftkkk"
            :to="{ name: 'productDetails', params:{ id:item.id}}"
            v-for="item of data"
            :key="item.id"
            >
            <div class="contentLeftImage">
              <el-tooltip
                class="item"
                effect="light"
                :content="item.name"
                placement="bottom"
                visible-arrow="false"
              >
                <img :src="item.image ? item.image : defaultNoImage" />
              </el-tooltip>
            </div>
            <div class="contentLeftText">
              <el-tooltip class="item" effect="light" :content="item.name" placement="top-start">
                <h5>{{item.name}}</h5>
              </el-tooltip>

              <p>
                <span>￥{{item.price}}</span>
                <del>￥{{item.old_price}}</del>
              </p>
              <p class="add_tag">
                <i>{{item.norm_name}}</i>
              </p>
            </div>
          </router-link>
         
        </ul>
        <el-button icon="el-icon-arrow-left" circle @click="prev" class="leftbtn"></el-button>
        <el-button icon="el-icon-arrow-right" circle @click="next" class="rightbtn"></el-button>
      </div>
    </div>
  </div>
</template>
<script>
import icon from "@/assets/icon/baokuan-.png"; 
export default {
  name: "SpecialOffer2",
  props: {
    data: Array,
    title: String,
    
  },
  data() {
    return {
      icon,
      show: false,
      defaultNoImage: require("../../../assets/logo/loading.png"),
      iconchanges: "icon-chilun", // 设置图标  后期会更换
      showdata: [],
      newlist: [],
      calleft: 0,
      disabled: true
    };
  },
  methods: {
    //移动
    move() {
      this.show = false;

      this.timer = setInterval(this.starmove, 3000);
      // console.log("移出");
    },
    //开始移动
    starmove() {
      this.calleft -= 240;
      this.$refs.vari.style.transform = `translate(${this.calleft}px)`;
      this.$refs.vari.style.transition = `transform 2s`;
      // console.log(this.calleft);
      if (this.calleft < -3020) {
        this.calleft = 240;
      }
    },
    //鼠标悬停时停止移动
    stopmove() {
      this.show = true;
      clearInterval(this.timer);
      // console.log("移入");
    },

    //点击按钮左移
    prev() {
      this.calleft += 240;
      this.$refs.vari.style.transform = `translate(${this.calleft}px)`;
      if (this.calleft >= 0) {
        this.calleft = 0;
        this.$refs.vari.style.transform = `translate(${this.calleft}px)`;
        console.log("到头了");
      } else if (this.calleft > 240) {
        console.log(ddd);
      }
    },
    // 点击按钮右移
    next() {
      this.calleft -= 240;
      this.$refs.vari.style.transform = `translate(${this.calleft}px)`;

      if (this.calleft < -3020) {
        this.calleft = 240;
      }
    }
  },
  mounted() {
    this.move();
    console.log(this.data);
  },
  destroyed(){
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.specialOffer2 {
  width: 100%;
  // background: #f1f1f1;
  padding-bottom: 24px;
  background-color: #fff;

  div {
    box-sizing: border-box;
    width: 1200px;
    margin: auto;

    h3 {
      line-height: 40px;
      padding: 0 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
     border-bottom:1px solid #ccc;
   
      p {
        &:last-child {
          cursor: pointer;
        }
        .more {
          font-weight: normal;
          font-size: 12px;
        }
      }
    }
    .allbox {
      width: 1200px;
      // height: 310px;
      overflow: hidden;

      ul {
        display: flex;
        flex-direction: row;
        
        // background-color: rgb(250, 250, 250);
        a {
          box-sizing: border-box;
          min-width: 230px;
          max-width: 230px;
          height: 330px;
          // background-color: red;
          font-weight: normal;
          // background-color: #fff;
          color: #333;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          margin: 5px;
          &:hover {
            border: 3px solid #409eff;
            // background-color: yellow;
          }
          .contentLeftImage {
            margin-top: 10px;
            width: 160px;
            height: 160px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
              transition: 0.3s all ease-out;
              &:hover {
                opacity: 0.8;
              }
            }
          }
          .contentLeftText {
            width: 172px;
            height: 164px;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: flex-start;
            h5 {
              width: 174px;
              min-height: 30px;
              box-sizing: border-box;
              padding: 5px 5px;
              font-weight: normal;
              font-size: 14px;
              margin-top: 32px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #333;
            }
            p:first-child {
              font-size: 16px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            p:nth-child(2) {
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
              line-height: 48px;
              span {
                color: #fe2121;
                font-size: 18px;
                font-weight: 700;
              }
              del {
                color: #a3a3a3;
                font-size: 14px;
              }
            }
            .add_tag {
              margin-top: 5px;
              padding: 0;
              i {
                padding: 2px 14px;
                margin: 0 auto;
                font-size: 12px;
                text-align: center;
                border: #ddd 1px solid;
              }
            }
          }
        }
      }
      .leftbtn {
        position: relative;
        top: -160px;
        left: 15px;
        z-index: 300;
        opacity: 0.5;
      }
      .rightbtn {
        position: relative;
        top: -160px;
        left: 1090px;
        z-index: 300;
        opacity: 0.5;
      }
    }
  }
}
</style>
